<template>
  <div :class="$style.explaining">
    <span :style="{ '--d': '0s', '--c': color }"></span>
    <span :style="{ '--d': '0.1s', '--c': color }"></span>
    <span :style="{ '--d': '0.2s', '--c': color }"></span>
  </div>
</template>

<script lang="ts"
  setup
  name="Explaining">

  defineProps(['color'])

  </script>

<style module
  lang="scss">
  .explaining {
    @apply relative z-1 flc;

    @keyframes x-height {
      from {
        transform: scaleY(1);
      }

      to {
        transform: scaleY(0.3);
      }
    }

    span {
      --c: rgba(70, 115, 238, 1);
      display: block;
      width: 20%;
      height: 100%;
      border-radius: 2px;
      background-color: var(--c);
      /* transform-origin: bottom; */
      animation: x-height 0.5s var(--d) ease infinite alternate;

      &+span {
        margin-left: 15%;
      }
    }
  }
</style>